<template>
  <div>
    <Row type="flex" :gutter="16" style="margin-bottom: 1rem">
      <Col :xs="24" :sm="10">
        <img :src="displayImg" class="display_img">
      </Col>
<!--      <RadioGroup v-model="searchParam.boothItem.targetType" type="button" class="y_condition" style="max-width: 100rem" @on-change="queryBoothItemList()">
        <Radio :label="0">全部</Radio>
        <Radio v-for="item in boothItemTypes" :label="item.value" :key="item.value">{{item.label}}</Radio>
      </RadioGroup>-->
      <Col :span="14">
        <Button type="info" icon="md-add" class="y_condition" @click="showAddBoothItemModal()" style="float: right;" v-if="!isCategoryListType && !isRichTextHtmlType">新增展位</Button>
      </Col>
    </Row>

    <div style="background: #f3f3f6;padding:0.5rem 1rem;text-align: left;">
      <p style="font-weight: bold;margin: 0.5rem 0">展区基本信息</p>
      <KeyValueView title="标题" :value="baseInfo.title" oneline></KeyValueView>
      <div>
        <KeyValueView title="展区顺序" :value="baseInfo.sequence"></KeyValueView>
        <KeyValueView title="展示类型" :value="getBoothType(baseInfo.displayType)"></KeyValueView>
      </div>
      <div>
        <KeyValueView title="显示行数" :value="baseInfo.rowNumber" v-if="isSlideType"></KeyValueView>
      </div>
      <div v-if="isUnionPlatform || isPcPlatform">
        <KeyValueView title="PC-每行列数" :value="baseInfo.columnPc+'列'" v-if="isTiledType"></KeyValueView>
<!--        <KeyValueView title="PC-高宽比" :value="baseInfo.heightPc+'%'" v-if="isBannerType || isSingleType"></KeyValueView>-->
      </div>
      <div>
        <KeyValueView title="手机端-每行列数" :value="baseInfo.columnMobile+'列'" v-if="isTiledType"></KeyValueView>
<!--        <KeyValueView title="手机端-高宽比" :value="baseInfo.heightMobile+'%'" v-if="isBannerType || isSingleType"></KeyValueView>-->
      </div>
      <KeyValueView title="内部备注" :value="baseInfo.note" v-if="isNotEmpty(baseInfo.note)" oneline></KeyValueView>
    </div>
    <div style="background: #f3f3f6; padding: 0 1rem 0.5rem 0; cursor: pointer; text-align: right;" >
      <Button size="small" type="info" ghost @click="showModifyBoothModal()">编辑基本信息</Button>
    </div>



    <!-- 展位列表 -->
    <List border style="margin: 2rem 0" v-if="!isRichTextHtmlType">
      <div v-if="boothItemList==null || boothItemList.length===0">
        <ListItem><div style="width: 100%; text-align: center;">暂无数据</div></ListItem>
      </div>
      <div v-else>
        <ListItem v-for="item in boothItemList" :key="item.id">
          <Row style="width: 100%" :gutter="32">
            <Col :xs="24" :sm="14" :md="12" :lg="10" class-name="item_left" style="text-align: center;">
              <div class="booth-item-img" v-if="isUnionPlatform || isPcPlatform">
                <template v-if="isNotEmpty(item.imagePc)">
                  <div class="img-box">
                    <img :src="yunPath+item.imagePc">
                  </div>
                  <div class="img-text" style="color: #888;font-size: 12px">(PC)</div>
                  <Tooltip :content="item.imagePcAlt" :max-width="200" v-if="isNotEmpty(item.imagePcAlt)">
                    <div class="img-text">{{item.imagePcAlt}}</div>
                  </Tooltip>
                </template>
                <span v-else>暂无PC端入口图片</span>
              </div>
              <div class="booth-item-img">
                <template v-if="isNotEmpty(item.imageMobile)">
                  <div class="img-box">
                    <img :src="yunPath+item.imageMobile">
                  </div>
                  <div class="img-text"  style="color: #888;font-size: 12px">(Mobile)</div>
                  <Tooltip :content="item.imageMobileAlt" :max-width="200" v-if="isNotEmpty(item.imageMobileAlt)">
                    <div class="img-text">{{item.imageMobileAlt}}</div>
                  </Tooltip>
                </template>
                <span v-else>暂无手机端入口图片</span>
              </div>
            </Col>
            <Col :xs="24" :sm="10" :md="12" :lg="14" style="padding-bottom: 40px;">
              <KeyValueView title="展位序号" :value="'#'+item.sequence" oneline></KeyValueView>
              <KeyValueView title="展位标题" :value="item.title" oneline></KeyValueView>

              <template  v-if="isHtmlType(item.targetType)">
                <KeyValueView title="关联-HTML" :value="item.targetValue" oneline></KeyValueView>
              </template>

              <template v-if="isShowroomType(item.targetType) || isHtmlShowroomType(item.targetType)">
                <KeyValueView title="关联-展厅" oneline>{{getShowroomTitle(item.showroom)}}<span v-if="isShowroomUnPublished(item.showroom)" style="color: red; margin-left: 2px;">(未发布)</span></KeyValueView>
                <KeyValueView title="展厅内部名称" :value="getShowroomName(item.showroom)" oneline></KeyValueView>
                <KeyValueView title="展厅固定网址" :value="getShortLink(item.showroom)" oneline></KeyValueView>
                <KeyValueView title="展厅标签" v-if="isNotEmpty(item.showroom.tags)">
                  <Tag border color="purple">{{getShowroomTags(item.showroom.tags)}}</Tag>
                </KeyValueView>
              </template>

              <template  v-if="isCollectionType(item.targetType)">
                <KeyValueView title="展位-产品集合" :value="item.collection==null?'暂无':item.collection.title" oneline></KeyValueView>
                <KeyValueView title="产品集合类型" :value="getCollectionType(item.collection)" oneline></KeyValueView>
<!--                <template v-if="isKeywordsType(item.collection)">-->
                  <KeyValueView title="产品集合搜索关键词" :value="item.collection.keyword" oneline></KeyValueView>
                  <KeyValueView title="产品上架日期" v-if="item.collection.addDateSearch==1" :value="searchDate(item.collection)" oneline></KeyValueView>
                  <div v-if="getCollectionFilters(item.collection).length>0">
                    <span style="color: #999;">产品集合过滤条件：</span>
                    <Tag v-for="(filter, index) in getCollectionFilters(item.collection)" :key="index" color="blue">
                      {{filter.field}} :
                      <template v-if="isPriceFilter(filter.field)">
                        {{getPriceValues(filter)}}
                      </template>
                      <template v-else-if="isSortFilter(filter.field)">
                        {{getSortFilterName(filter.value)}}
                      </template>
                      <template v-else-if="isDateFilter(filter.field)">
                        {{getDateRange(filter)}}
                      </template>
                      <template v-else>
                        {{filter.value}}
                      </template>
                    </Tag>
                  </div>
<!--                </template>-->
              </template>

              <span style="color: red;" v-if="isEmpty(item.targetValue)">{{emptyTargetTip(item)}}</span>

              <div style="text-align: right; position: absolute; top: 10px; right: 10px;" v-if="item.targetType">
                <Tag color="magenta" style="min-width: 5rem;text-align: center">展位类型： {{getBoothItemType(item.targetType)}}</Tag>
              </div>

              <div style="text-align: right; position: absolute; bottom: 0px; right: 10px;">
                <Dropdown @on-click="name => {clickDropdown(name, item);}">
                  <Button size="small">修改关联目标<Icon type="ios-arrow-down"></Icon></Button>
                  <DropdownMenu slot="list" style="text-align: left;">
                    <DropdownItem name="item_collection">关联产品集合</DropdownItem>
<!--                    <DropdownItem name="item_collection_products" :disabled="!isCollectionProductsButtonAvailable(item.collection)">关联产品</DropdownItem>-->
                    <DropdownItem name="item_html">关联html</DropdownItem>
                    <DropdownItem name="item_showroom">关联展厅</DropdownItem>
                  </DropdownMenu>
                </Dropdown>
                <Button size="small" @click="showModifyBoothItemModal(item)" style="margin: 0 0.5rem">编辑</Button>
                <Button size="small" @click="deleteBoothItem(item)">删除</Button>
              </div>
            </Col>
          </Row>
        </ListItem>
      </div>
    </List>

    <!-- 编辑展区基本信息弹窗 -->
    <Modal v-model="boothStatus.modalModify.isShow" title="编辑展区基本信息" width="1000" :mask-closable="false">
      <a-booth-form ref="BoothEdit" :booth-model="modifyBoothModel" :showroom-platform="showroomPlatform" :showroom-type="showroomType"></a-booth-form>
      <div slot="footer">
        <Button @click="hideModifyBoothModal()">取消</Button>
        <Button type="primary" @click="modifyBooth()">保存</Button>
      </div>
    </Modal>

    <!-- 新增展位 -->
    <Modal v-model="boothItemStatus.modalAdd.isShow" title="新增展位" width="700" :mask-closable="false">
      <a-booth-item-form ref="BoothItemAdd" :booth-item-model="addBoothItemModel" :operation="addOperation"
                         :booth-platform="baseInfo.platform" :booth-type="baseInfo.displayType"></a-booth-item-form>
      <div slot="footer">
        <Button @click="hideAddBoothItemModal()">取消</Button>
        <Button type="primary" @click="addBoothItem()">保存</Button>
      </div>
    </Modal>

    <!-- 编辑展位 -->
    <Modal v-model="boothItemStatus.modalModify.isShow" title="编辑展位" width="700" :mask-closable="false">
      <a-booth-item-form ref="BoothItemEdit" :booth-item-model="editBoothItemModel" :operation="editOperation"
                         :booth-platform="baseInfo.platform" :booth-type="baseInfo.displayType"></a-booth-item-form>
      <div slot="footer">
        <Button @click="hideModifyBoothItemModal()">取消</Button>
        <Button type="primary" @click="modifyBoothItem()">确定</Button>
      </div>
    </Modal>

    <!-- 编辑关联展厅 -->
    <Modal v-model="boothItemStatus.modalShowroom.isShow" title="关联展厅" :mask-closable="false" :width="1000">
      <showroom-selection @query-list="queryShowroomList" :is-single-select="true" :limit-platforms="limitPlatforms" :category-list="categoryList"></showroom-selection>
      <div slot="footer">
        <Button @click="hideShowroomSelectionModal()">取消</Button>
        <Button type="primary" @click="modifyShowroom()">确定</Button>
      </div>
    </Modal>

    <!-- 关联HTML -->
    <Modal v-model="boothItemStatus.modalHtml.isShow" title="关联HTML" :mask-closable="false" :width="700">
      <Form :model="editBoothItemModel" ref="itemHtmlForm" label-colon :show-message="false">
        <FormItem label="html页面网址" prop="targetValue" required>
          <Input type="text" v-model.trim="editBoothItemModel.targetValue"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="hideModifyHtmlModal()">取消</Button>
        <Button type="primary" @click="modifyHtml()">保存</Button>
      </div>
    </Modal>

    <!-- 产品集合 -->
    <Modal v-model="collectionStatus.modalAdd.isShow" title="关联产品集合" :mask-closable="false" :width="700">
      <collection-form ref="modifyCollection" :collection-model="collectionModel"></collection-form>
      <div slot="footer">
        <Button @click="hideModifyCollectionModal()">取消</Button>
        <Button type="primary" @click="modifyCollection()">保存</Button>
      </div>
    </Modal>

    <!-- 关联产品 -->
    <Modal v-model="boothItemStatus.modalProducts.isShow" title="产品集合" :mask-closable="false" :width="1000" :footer-hide="true">
      <collection-products :collection-id="collectionProducts.collectionId" :booth-item-id="collectionProducts.boothItemId" :modify-time="collectionProducts.modifyingTime"></collection-products>
    </Modal>
  </div>
</template>

<script>
import tiyData from "./js/stand/booth_data"
import commonData from "./js/stand/common_data";
import collectionData from "./js/stand/collection_data"

import {
  resetPageInfo,
  initBoothInfo,
  showModifyBoothBaseInfoModal,
  modifyBooth,
  addBoothItem,
  showModifyBoothItemModal,
  deleteBoothItem,
  modifyBoothItem,
  showShowroomSelectionModal,
  queryShowroomList,
  modifyShowroom,
  queryBoothItemList,
  resetBoothItemListSearchParam,
  showAddBoothItemModal,
  modifyBoothItemHtml,
  showModifyCollectionModal,
  modifyCollection,
  showCollectionProductsModal,
} from "./js/stand/booth_funs"
import {isEmpty, isNotEmpty} from "../js/commonUtils";

import ABoothForm from "./ABoothForm";
import ABoothItemForm from "./ABoothItemForm";
import ShowroomSelection from "./showroomSelect/ShowroomSelection";
import KeyValueView from "../widgets/KeyValueView";
import CollectionForm from "./CollectionForm";
import CollectionProducts from "./CollectionProducts";


export default {
  name: "BoothModify",
  props: {
    boothId: {type: String, required: true},
    showroomPlatform: {type: Number, required: true},
    showroomType: {type: Number, required: true},
    modifyTime: {type: Number, required: true},
  },
  data() {
    return {
      isDisplayBaseInfo: false,
      yunPath: this.$store.getters.imgPrefix,
      baseInfo: tiyData.tData.boothBaseInfo,
      boothItemList: tiyData.tData.boothItemList,
      boothTypes: commonData.boothDic.types,
      boothItemTypes: commonData.boothItemDic.types,
      boothStatus: tiyData.tStatus.booth,
      modifyBoothModel: tiyData.tParam.editParam.booth,
      addBoothItemModel: tiyData.tParam.addParam.boothItem,
      addOperation: {isAdd: true, type: null},
      boothItemStatus: tiyData.tStatus.boothItem,
      editBoothItemModel: tiyData.tParam.editParam.boothItem,
      editOperation: {isAdd: false, type: null},
      searchParam: tiyData.tParam.searchParam,
      collectionProducts: tiyData.tParam.editParam.collectionProducts,
      collectionModel: collectionData.tParam.addParam.collection,
      collectionStatus: collectionData.tStatus.collection,
      categoryList: commonData.categoryList,
    }
  },
  components: {
    ABoothItemForm, ABoothForm, ShowroomSelection, KeyValueView, CollectionForm, CollectionProducts
  },
  methods: {
    getBoothType(type) {
      let element = commonData.boothDic.types.find(element => element.value == type);
      return element==null?"":element.label;
    },
    showModifyBoothModal() {
      showModifyBoothBaseInfoModal(this, tiyData.tData.boothBaseInfo);
    },
    hideModifyBoothModal() {
      tiyData.tStatus.booth.modalModify.isShow = false;
    },
    modifyBooth() {
      modifyBooth(this);
    },
    getBoothItemType(type) {
      let element = commonData.boothItemDic.types.find(element => element.value == type);
      return element==null?"":element.label;
    },
    isCollectionType(type) {
      return type == commonData.boothItemDic.collectionType;
    },
    isHtmlType(type) {
      return type == commonData.boothItemDic.htmlType;
    },
    isShowroomType(type) {
      return type == commonData.boothItemDic.showroomType;
    },
    isHtmlShowroomType(type) {
      return type == commonData.boothItemDic.htmlShowroomType;
    },
    isCustomType(type) {
      return type == commonData.collectionDic.customType;
    },
    isShowCollectionButton(boothItem) {
      return this.isCollectionType(boothItem.targetType) && this.isCustomType(boothItem.collection.type);
    },
    isEmpty(val) {
      return isEmpty(val);
    },
    isNotEmpty(val) {
      return isNotEmpty(val);
    },
    showAddBoothItemModal() {
      this.addOperation.isAdd = true;
      this.addOperation.type = null;
      showAddBoothItemModal(this);
    },
    hideAddBoothItemModal() {
      tiyData.tStatus.boothItem.modalAdd.isShow = false;
    },
    addBoothItem() {
      addBoothItem(this);
    },
    showModifyBoothItemModal(boothItem) {
      this.editOperation.isAdd = false;
      this.editOperation.type = null;
      showModifyBoothItemModal(this, boothItem.id);
    },
    showCollectionProductsModal(boothItem) {
      showCollectionProductsModal(boothItem.id, boothItem.collection.id);
    },
    showShowroomSelectionModal(boothItem) {
      showShowroomSelectionModal(this, boothItem, this.baseInfo.platform);
    },
    queryShowroomList() {
      queryShowroomList(this);
    },
    hideShowroomSelectionModal() {
      tiyData.tStatus.boothItem.modalShowroom.isShow = false;
    },
    modifyShowroom() {
      modifyShowroom(this);
    },
    deleteBoothItem(boothItem) {
      deleteBoothItem(this, boothItem.id);
    },
    hideModifyBoothItemModal() {
      tiyData.tStatus.boothItem.modalModify.isShow = false;
    },
    modifyBoothItem() {
      modifyBoothItem(this);
    },
    queryBoothItemList() {
      queryBoothItemList(this);
    },
    getShowroomDisplayTxt(showroom) {
      if(showroom==null) {
        return "暂无";
      }
      return showroom.name;
    },
    getShowroomTitle(showroom) {
      if(showroom==null) {
        return "暂无";
      }
      return showroom.title;
    },
    getShowroomName(showroom) {
      if(showroom==null) {
        return "暂无";
      }
      return showroom.name;
    },
    getShowroomState(state) {
      let element = commonData.standsDic.states.find(element => element.value == state);
      return element?element.label:"";
    },
    isShowroomPublished(showroom) {
      if(showroom == null) {
        return false;
      }
      return showroom.state == commonData.standsDic.publishedState;
    },
    isShowroomUnPublished(showroom) {
      if(showroom == null) {
        return false;
      }
      return showroom.state == commonData.standsDic.unPublishedState;
    },
    getShortLink(showroom) {
      if(showroom == null) {
        return "";
      }else{
        if(isNotEmpty(showroom.shortLink)) {
          return this.$store.getters.webDomain + showroom.shortLink;
        }else{
          if(this.isIndexShowroom(showroom.type)) {
            return this.$store.getters.webDomain;
          }
          return "";
        }
      }
    },
    getShowroomTags(tags) {
      if(isNotEmpty(tags)) {
        return this.$toJson(tags).join(",");
      }
      return "";
    },
    isIndexShowroom(type) {
      return type == commonData.standsDic.indexPageType;
    },
    getCollectionType(collection) {
      if(collection == null) {
        return "";
      }
      let element = commonData.collectionDic.types.find(element => element.value == collection.type);
      return element?element.label:"";
    },
    isKeywordsType(collection) {
      if(collection == null) {
        return false;
      }
      return collection.type == commonData.collectionDic.keywordType;
    },
    getCollectionFilters(collection) {
      if(collection == null) {
        return [];
      }
      if(isNotEmpty(collection.filters)) {
        return this.$toJson(collection.filters);
      }
      return [];
    },
    isPriceFilter(field) {
      return isNotEmpty(field) && field.toLowerCase() == "price";
    },
    getPriceValues(filter) {
      let priceValues = [];
      if(isNotEmpty(filter.startValue) && isNotEmpty(filter.endValue)) {
        return "$"+filter.startValue + "~$" + filter.endValue;
      }
      if(isNotEmpty(filter.startValue)) {
        return "> $"+filter.startValue;
      }
      if(isNotEmpty(filter.endValue)) {
        return "< $"+filter.endValue;
      }
      return "";
    },
    isSortFilter(field) {
      return isNotEmpty(field) && field.toLowerCase() == "sortby";
    },
    isDateFilter(field) {
      return isNotEmpty(field) && field.toLowerCase() == "date";
    },
    getSortFilterName(value) {
      switch (parseInt(value)) {
        case 1:
          return "Order By Newest";
        case 2:
          return "Order By Lowest Price";
        case 3:
          return "Order By Highest Price";
      }
      return "";
    },
    getDateRange(filter) {
      if(isNotEmpty(filter.startDate) && isNotEmpty(filter.endDate)) {
        return this.$tiyBJTime(new Date(filter.startDate).getTime(), "yyyy-MM-dd") + "~"
          + this.$tiyBJTime(new Date(filter.endDate).getTime(), "yyyy-MM-dd");
      }
      if(isNotEmpty(filter.startDate)) {
        return this.$tiyBJTime(new Date(filter.startDate).getTime(), "yyyy-MM-dd") + "以前";
      }
      if(isNotEmpty(filter.endDate)) {
        return this.$tiyBJTime(new Date(filter.endDate).getTime(), "yyyy-MM-dd") + "以后";
      }
      return "";
    },
    isCollectionProductsButtonAvailable(collection) {
      return collection && this.isCustomType(collection.type);
    },
    emptyTargetTip(item) {
      if(item.targetType) {
        if(this.isCollectionType(item.targetType)) {
          return "展位尚未关联产品集合";
        }
        if(this.isHtmlType(item.targetType)) {
          return "展位尚未关联HTML";
        }
        if(this.isShowroomType(item.targetType) || this.isHtmlShowroomType(item.targetType)) {
          return "展位尚未关联展厅";
        }
      }
      return "展位尚未关联任何内容";
    },
    clickDropdown(name, item) {
      switch (name) {
        case "item_collection":
          this.showModifyCollectionModal(item);
          break;
        /*case "item_collection_products":
          this.showCollectionProductsModal(item);
          break;*/
        case "item_html":
          this.showModifyHtmlModal(item);
          break;
        case "item_showroom":
          this.showShowroomSelectionModal(item);
          break;
      }
    },
    showModifyHtmlModal(item) {
      this.$refs.itemHtmlForm.resetFields();
      tiyData.tParam.editParam.boothItem.id = item.id;
      if(this.isHtmlType(item.targetType)) {
        tiyData.tParam.editParam.boothItem.targetValue = item.targetValue;
      }
      tiyData.tStatus.boothItem.modalHtml.isShow = true;
    },
    hideModifyHtmlModal() {
      tiyData.tStatus.boothItem.modalHtml.isShow = false;
    },
    modifyHtml() {
      modifyBoothItemHtml(this);
    },
    showModifyCollectionModal(item) {
      if(item.collection == null) {
        showModifyCollectionModal(this, item);
      }else{
        this.showCollectionProductsModal(item);
      }
    },
    hideModifyCollectionModal() {
      collectionData.tStatus.collection.modalAdd.isShow = false;
    },
    modifyCollection() {
      modifyCollection(this);
    },
    searchDate(baseInfo){
      if(baseInfo.addDateSearch==1){
        if(baseInfo.endDate){
          return baseInfo.startDate+' - '+baseInfo.endDate
        }else{
          return ">= "+baseInfo.startDate;
        }
      }
      return "";
    }
  },
  computed: {
    isUnionPlatform() {
      return this.baseInfo.platform == commonData.standsDic.unionPlatform;
    },
    isPcPlatform() {
      return this.baseInfo.platform == commonData.standsDic.pcPlatform;
    },
    isAppPlatform() {
      return this.baseInfo.platform == commonData.standsDic.appPlatform;
    },
    isBannerType() {
      return this.baseInfo.displayType == commonData.boothDic.bannerType;
    },
    isSingleType() {
      return this.baseInfo.displayType == commonData.boothDic.singleType;
    },
    isTiledType() {
      return this.baseInfo.displayType == commonData.boothDic.tiledType;
    },
    isCategoryListType() {
      return this.baseInfo.displayType == commonData.boothDic.categoryListType;
    },
    isNavigateType() {
      return this.baseInfo.displayType == commonData.boothDic.navigateType;
    },
    isSlideType() {
      return this.baseInfo.displayType == commonData.boothDic.slideType;
    },
    isRichTextHtmlType() {
      return this.baseInfo.displayType == commonData.boothDic.htmlType;
    },
    limitPlatforms() {
      if(this.isAppPlatform) {
        return [commonData.standsDic.appPlatform, commonData.standsDic.unionPlatform];
      }
      if(this.isPcPlatform) {
        return [commonData.standsDic.pcPlatform, commonData.standsDic.unionPlatform];
      }
      if(this.isUnionPlatform) {
        return [commonData.standsDic.unionPlatform];
      }
      return [];
    },
    displayImg() {
      return commonData.boothDic.typeImgKeyPrefix + this.baseInfo.displayType + (this.isTiledType?".gif":".jpg");
    }
  },
  watch: {
    modifyTime() {
      resetPageInfo(this);
      resetBoothItemListSearchParam(this.boothId);
      initBoothInfo(this, this.boothId, true);
    }
  },
}
</script>

<style scoped lang="less">
@import  (once,optional)  "../css/base.less";

.display_img{
  width: 40%;
  @media @mobile{
    width: 80%;
  }
}

.booth-item-img {
  display: inline-block;
  vertical-align: top;
  margin: 0 6px;
  .img-box {
    width: 150px;
    padding-bottom: 0.5rem;
    text-align: center;
    img {
      max-width: 100%;
      max-height: 80%;
      vertical-align: middle;
    }
  }
  .img-text {
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

  }

  span {
    color: #ccc;
    font-size: 13px;
  }
}
</style>
